<template>
    <div class="shopDetails">
        <div class="message_header">
           <div class="message_header_con">
                <span class="goBack" @click="goBack">&lt;</span>
                <p class="message_title">{{title}}</p>
                <img src="../../static/img/share.png" alt="" class="share_png">
           </div>
       </div>
       <div class="shopkeeper">
           <div class="shopkeeper_con">
               <div class="shopkeeper_left">
                   <p class="imgUrl"></p>
                   <div class="shopkeeper_text">
                       <p class="shopkeeper_text_top">
                           <span>江南老酒大亨{{this.$route.query.id}}</span>
                           <img src="../../static/img/badge.png" alt="">
                       </p>
                       <p class="shopkeeper_text_btm">粉丝&nbsp;{{fansNum}}</p>
                   </div>
               </div>
               <div class="shopkeeper_right">
                   <span class="private_letter">私信</span>
                   <span class="follow">关注</span>
               </div>
           </div>
       </div>
       <p class="commodity_top">全部商品</p>
       <ul class="commodity_con">
           <li v-for="(item,index) in commodityList" :key="index">
               <p class="commodity_img"></p>
               <div class="commodity_text">
                   <span class="commodity_title">{{item.title}}</span>
                   <span class="commodity_price">&yen;{{item.price}}</span>
               </div>
           </li>
       </ul>
    </div>
</template>
<script>
export default {
    name:'shopDetails',
    data(){
        return{
            title:'店铺',
            fansNum:500,
            commodityList:[
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'2500'

                },
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'2500'

                },
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'2500'

                },
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'2500'

                },
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'2500'

                },
                {
                    imgUrl:'',
                    title:'出售12年飞天茅台',
                    price:'2500'

                },
            ]
        }
    },
    methods:{
        goBack(){
            this.$router.go(-1)
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../assets/less/public.less);
.shopDetails{
    background:@config-bg3 ;
    height: 100vh;
    padding-top: 50px;
    .message_header{
        @font16();
        @height();
        background: @config-bg2;
        border-bottom: 1px solid #cccccc;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        .message_header_con{
            @width();
             @flex();
             @justify1();
            .goBack{
                @goBack();
            }
            .message_title{
                flex-grow: 1;
                @font16();
            }
            .share_png{width: 25px;}
        }
    }
    .shopkeeper{
         background: @config-bg2;
         padding: 1.5em 0;
         .shopkeeper_con{
             @width();
             @flex();
             @justify4();
             .shopkeeper_left{
                 @flex();
                @justify3();
                 .imgUrl{
                     width: 50px;
                     height: 50px;
                     border-radius: 50px;
                     background: @config-bg;
                     margin-right: 1em;
                 }
                 .shopkeeper_text_top{
                      @flex();
                      @justify3();
                      img{
                          width: 25px;
                      }
                 }
                 .shopkeeper_text_btm{
                     text-align: left;
                     color: #ab8383;
                 }
             }
             .shopkeeper_right{
                span{
                    border: 1px solid;
                    padding: 0.3em 1em;
                    border-radius: 2px;
                }
                .private_letter{
                    color: #ec3720;
                    border-color: #ec3720;
                    margin-right: 0.3em
                }
                .follow{
                    color: @config-bg;
                    border-color: @config-bg;
                }
             }
         }
    }
    .commodity_top{
        background: @config-bg2;
        text-align: center;
        margin: 0.8em 0;
        padding: 1em 0;
    }
    .commodity_con{
        @width();
        @flex();
        @justify4();
        flex-wrap:wrap;
        li{
            width: 49%;
            background: @config-bg2;
            border-radius: 3px;
            margin-bottom: 0.5em;
            overflow: hidden;
            .commodity_img{
                width: 100%;
                height: 200px;
                overflow: hidden;
                background: @config-bg;
            }
            .commodity_text{
                padding: 0.8em 0 0.8em 0.7em;
                text-align: left;
                box-sizing: border-box;
                .commodity_title{
                    display: block;
                    line-height: 1.7em
                    }
                .commodity_price{
                    color: @config-bg;
                }
            }
        }
    }
}
</style>
